<template>
	<!-- 商品介绍 -->
	<view class="ProductsList">
	<!-- 轮播图开始 -->
	<swiper class="swiper" autoplay>
		<swiper-item v-for="item in products.images" :key="item">
			<image :src="resetImgUrl(item)" mode="aspectFill"></image>
		</swiper-item>
	</swiper>
	<!-- 轮播图结束 -->         
	<!-- 商品内容开始 -->        
	  <view class="top"> 
	     
		<view class="product_flex">
			<view class="name">{{products.name}}</view>  <!--商品名称 -->
			<u-icon :name=" favorite?'star-fill':'star'" color="#fff93a" size="55"  @click="Favorite"></u-icon>
		</view>
		<view class="description">
			{{products.description}}
		</view>
	     <!-- <view class="argument"> 
	      <view class="discount">￥{{products.shipmentPrice}}</view>  
			<view v-if="products.discount!=products.shipmentPrice">   
				<view class="price">￥{{products.shipmentPrice}}</view>
	        </view>
	      </view> -->
	  </view>         
	
	
	       <!--规格信息开始  -->
	 <view class="product" v-show="hidden">
	   <view class="content"> 
	   <view  class="agm">
	       <view class="img">  
	      <image  v-if="products.images":src="products.images[0]"  @click="handlepreviewImage" data-idx="1"></image>
	      </view>           
	      <!-- 商品折扣后价格 -->
	        <view class="discount">￥{{products.shipmentPrice||"15.00"}}</view> 
	        <!-- 商品库存数量 -->
	        <view class="store">库存{{products.stock||"999"}}</view> 
	        <!-- 关闭按钮 -->
	      <view class="close" @click="hidden=!hidden">×</view> 
	   </view>    
	        
	    
	    <view class="arguments">   
	      <text>规格</text>  
	      <!-- <view :class="active?'active':''" @click="active=!active">默认</view> -->
	      <view class="active">默认</view>
		  
	    </view>                  
	    <view class="num">
	      <text>购买数量</text>   
	      <view class="btn">    
	      <u-number-box 
		  v-model="value" 
		  @change="valChange" 
		  :min="1" 
		  :max="products.stock"
		   integer
		    button-size="45"
			inputWidth="70"
		   ></u-number-box>
	      </view>     
	    </view>       
	  </view>             
	  </view> 
	       <!--规格信息结束  -->
	     
	      <!--底部菜单开始-->    
	      <view class="bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="fenxiang">
	       <image src="@/static/home.png" bindtap="" mode="widthFix"></image> 
	       <text>首页</text>
	      </navigator>
	       <navigator url="/pages/shopping/index" open-type="switchTab"><!--购物车图标-->
	      <image src="@/static/shop.png"  mode="widthFix"></image>
	      <text>购物车</text>  
	      </navigator>     
	      <view class="shopping" @click="Addshopping">加入购物车</view>
	      <view class="nowbuy" @click="BuyNow">立即购买</view> 
	      </view>     
	      <!--底部菜单结束-->  
	</view>     
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
					products:{},
					introduction: [],
					active: true,
					hidden: false,
					value:1,
					num: 1,
					favorite:false
			}
		},
		mounted() {
			 // const products = JSON.parse(options.products) //获取跳转时传递的商品数据
			// const favorite = wx.getStorageSync('favorite')||[]
			// let index = favorite.findIndex(v=>{return v.fid===products.fid})
			//  let Favorite = index>-1?true:false
			// this.setData({
			// 	products,
			// 	Favorite
			// })
			this.getProduct()
		},
		methods: {
			getProduct(){ 
				let _id = this.options.id
				this.$http.getproductById({_id}).then(res=>{
					this.products = res.product[0]
				})
			},
			Favorite(){
			      this.favorite = !this.favorite
			    },
			handlepreviewImage(e) {
				// 点击图片时展示对应图片
				const urls = this.products.images
				const index = e.currentTarget.dataset.idx
				uni.previewImage({
					urls: urls,
					current: urls[index]
				})
			},
			Addshopping() {
				// 添加商品时方法
				let {hidden,products,num}  = this
				if(!hidden){
					this.hidden =!this.hidden
					return 
				}
				if (hidden == true) { //判断是否已打开菜单
				   this.hidden =!this.hidden
				}
				 // app.cal(active, products, this, num, "hidden") //封装好的添加到购物车方法
				this.num = 1
			},
			BuyNow() {
				let {hidden}  = this
				if(!hidden){
					this.hidden =!this.hidden
					return 
				}
				if (hidden == true) { //判断是否已打开菜单
				   this.hidden =!this.hidden
				}
				if(app.globalData.login===false){
				  wx.showToast({
					title: '请先登录',
					icon:"none"
				  })
				  setTimeout(function(){
					  wx.switchTab({
						  url: '/pages/personal/index'
						})
				  },1000)
				  
				  return false
			  }
				if (hidden == true) { //判断是否已打开菜单
					this.hidden = !this.hidden
					return
				}
				this.setData({
					["products.num"]:this.data.num
				})
				var products =JSON.stringify(this.data.products);
				console.log(products);
				
				wx.navigateTo({
				  url: '/pages/pay/index?products='+products,
				})
			},
			Act() {
				
					this.active=!this.active
			},
			MathNum(e) { //计算购买商品数量
				let name = e.currentTarget.dataset.name
				let num = this.data.num
				let value = e.detail.value - 0
				app.MathNum(name, num, this, value)
			},
		}
	}
</script>

<style scoped>
page {
  background-color: #fcfcfc;
  height: 100%;
  position: relative;
}
.ProductsList {
  width: 100%;
  color: rgba(0, 0, 0, 0.7);
  font-size: 24rpx;
  margin-bottom: 100rpx;
}
.ProductsList text {
  margin: 20rpx 10rpx 20rpx 30rpx;
  display: inline-block;
}
.ProductsList .swiper {
  width: 100%;
  height: 600rpx;
  background-color: #fff;
}
.ProductsList .swiper image {
  height: 600rpx;
}
.ProductsList .top {
  border-top: 2rpx solid var(--themeColor);
  background-color: #fff;
  overflow: hidden;
  position: relative;
   padding: 30rpx 40rpx;
}
.product_flex{
	display: flex;
	justify-content: space-between;
}
.ProductsList .top .name {
  font-size: 30rpx;
  font-weight: 700;
}
.ProductsList .top .description {
  font-size: 24rpx;
  margin-top: 20rpx;
  width: 80%;
  color: #666;
}
.ProductsList .top .argument .discount {
  color: red;
  font-size: 34rpx;
  margin-top: 20rpx;
  margin-left: 30rpx;
}
.ProductsList .top .argument view .price {
  color: #c4c4c4;
  text-decoration: line-through;
  margin: 15rpx 30rpx;
}
.ProductsList .top .argument .SoldOut {
  margin-top: 15rpx;
  color: #c4c4c4;
}
.ProductsList .introduction {
  margin-top: 15rpx;
  padding: 30rpx;
  background-color: #fff;
}
.ProductsList .introduction text {
  font-weight: 600;
  font-size: 30rpx;
  margin: 0;
}
.ProductsList .introduction .reg text {
  font-size: 26rpx;
  margin-top: 20rpx;
}
.ProductsList .introduction .reg .proreg {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}
.ProductsList .introduction .reg .proreg view {
  display: flex;
  align-items: center;
  color: #000;
}
.ProductsList .introduction .reg .proreg view .txt1 {
  font-size: 24rpx;
}
.ProductsList .introduction .reg .proreg view .txt1::before {
  content: '';
  width: 8rpx;
  height: 8rpx;
  background-color: #666;
  margin: 0 14rpx;
  border-radius: 8rpx;
}
.ProductsList .introduction .reg .proreg view .txt2 {
  margin-top: 5rpx;
  font-size: 20rpx;
  color: #ccc;
}
.ProductsList .introduction .reg .proreg .txt3 {
  font-size: 26rpx;
}
.ProductsList .introduction .regimg {
  margin-top: 20rpx;
}
.ProductsList .detail {
  margin-top: 15rpx;
  background-color: #fff;
  padding: 20rpx 30rpx ;
}
.ProductsList .detail .mast {
  font-size: 30rpx;
  font-weight: 600;
}
.ProductsList .detail text {
  margin: 0;
  display: block;
}
.ProductsList .detail view {
  margin: 15rpx 10rpx;
  font-size: 26rpx;
  font-weight: 600;
}
.ProductsList .detail view text {
  font-weight: normal;
  margin-top: 10rpx;
  font-size: 24rpx;
}
.ProductsList .product {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 26rpx;
  z-index: 9;
}
.ProductsList .product button {
  font-weight: normal;
  font-size: 26rpx;
}
.ProductsList .product .content {
  width: 100%;
  height: 430rpx;
  background-color: #fff;
  position: fixed;
  bottom: 101rpx;
}
.ProductsList .product .content .agm {
  padding-left: 290rpx;
  position: relative;
}
.ProductsList .product .content .agm .img {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  left: 50rpx;
  top: -50rpx;
  border: 1rpx solid #ccc;
  text-align: center;
  background-color: #fff;
  border-radius: 5rpx;
}
.ProductsList .product .content .agm .img image {
  width: 200rpx;
  height: 200rpx;
}
.ProductsList .product .content .agm .close {
  position: absolute;
  right: 30rpx;
  top: 0;
  padding: 0 11rpx;
  border-radius: 50%;
  display: block;
  font-size: 40rpx;
  font-weight: bold;
}
.ProductsList .product .content .agm .discount {
  color: red;
  font-size: 30rpx;
  display: block;
  margin-top: 20rpx;
}
.ProductsList .product .content .agm .store {
  margin-top: 20rpx;
  margin-left: 10rpx;
}
.ProductsList .product .content .arguments {
  margin-top: 70rpx;
  border-top: 1rpx solid #ccc;
}
.ProductsList .product .content .arguments text {
  display: block;
  margin-left: 25rpx;
}
.ProductsList .product .content .arguments view {
  font-size: 26rpx;
  margin: 5rpx 20rpx;
  display: inline-block;
  padding: 10rpx 15rpx;
  border-radius: 15rpx;
  background-color: #EEE;
  margin-bottom: 15rpx;
}
.ProductsList .product .content .arguments .active {
  background-color: #eb4545;
  color: white;
}
.ProductsList .product .content .num {
  border-top: 1rpx solid #ccc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
}
.ProductsList .product .content .num text {
  display: inline-block;
  margin: 0;
}
.ProductsList .bottom {
  width: 100%;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  text-align: center;
  border-top: 1rpx solid #ccc;
  font-size: 28rpx;
  z-index: 999;
}
.ProductsList .bottom text {
  font-size: 22rpx;
  margin: 0;
}

.ProductsList .bottom navigator {
  flex: 1;
  text-align: center;
  border-left: 1rpx solid #ccc;
  padding: 10rpx 0;
  box-sizing: border-box;
}
.ProductsList .bottom navigator image {
  width: 60%;
  margin-bottom: -15rpx;
}
.ProductsList .bottom .shopping {
  flex: 3;
  color: white;
  background-color: #f1aa0f;
  line-height: 100rpx;
}
.ProductsList .bottom .nowbuy {
  flex: 3;
  color: white;
  background-color: #fa3a3a;
  line-height: 100rpx;
}
</style>
